<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <base href="/history/index.html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="javascript:；" data-to="/">主页</a>
    <a href="javascript:；" data-to="/my">个人</a>
    <a href="javascript:；" data-to="/task">任务</a>
    <div id="view"></div>
    <script>
        
        // function add() {
        //     console.log(111);
        //     window.location.reload([bForceGet])
        // }
        // add()
        // webpack配置了HistoryApiFullback

        class Router {
            constructor({ routes }) {
                this.$routes = routes;
                this.$el = document.getElementById('view')
                this.init()
            }
            init() {
                let as = document.querySelectorAll('a');
                [...as].forEach((node) => {
                    node.addEventListener('click', () => {
                        let path = node.getAttribute('data-to'); //获取自定义事件
                        console.log(path, 'path1'); 
                        // 路由的跳转实际上是依赖的window.history.pushState({}, null, path);
                        // 接受三个参数 第一个参数接受的是路由参数 第二个参数接受的是标签内容 第三个参数接受的是跳转的路由地址
                        window.history.pushState({}, null, path);
                        let innerHtml = this.$routes.filter(route => route.path === path)[0].components;
                        this.$el.innerHTML = innerHtml;
                    })
                })
                // 类似于一个事件函数，当用户在浏览器点击后退、前进，或者在js中调用
                // histroy.back()，history.go()，history.forward()等，会触发popstate事件
                window.addEventListener('popstate', () => {
                    let path = window.location.pathname;
                    console.log(path, 'path2');

                    // 接受三个参数 第一个参数接受的是路由参数 第二个参数接受的是标签内容 第三个参数接受的是跳转的路由地址
                    let innerHtml = this.$routes.filter(route => route.path === path)[0].components;
                    this.$el.innerHTML = innerHtml;
                })
            }
        }

        new Router({
            routes: [
                {
                    path: '/',
                    components: '主页'
                },
                {
                    path: '/task',
                    components: '任务'
                },
                {
                    path: '/my',
                    components: '我的'
                }
            ]
        })
    </script>
</body>

</html>